<template>
<teleport to='#modal'><!-- 这是类名选择器，记得加上这个# 这个是id选择器 -->
  <div class="modal d-block" tabindex="-1" v-if="visible">  <!-- bootstrap是默认隐藏的 -->
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{title}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" @click="onClose">&times;</span>
        </button> <!-- 这里是在点击时也去触发这个关闭的事件-->
      </div>
      <div class="modal-body">
        <slot></slot>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="onClose">取消</button>
        <button type="button" class="btn btn-primary" @click="onShow">确定</button>
      </div>
    </div>
  </div>
</div>
</teleport>
</template>

<script lang='ts'>
import { defineComponent, onUnmounted } from 'vue'
export default defineComponent({
  name: 'Modal',
  props: {
    title: String, // 信息展示
    visible: { // 是否可见
      type: Boolean,
      default: false
    }
  },
  emits: ['model-on-close', 'model-on-show'],

  setup (props, context) {
    const mountNode = document.createElement('div')
    mountNode.id = 'modal'
    document.body.appendChild(mountNode)
    const onClose = () => {
      context.emit('model-on-close')
    }
    const onShow = () => {
      context.emit('model-on-show')
    }
    onUnmounted(() => {
      document.body.removeChild(mountNode)// 这里犯错了，你不是给整个文档加节点你是在给body整个节点上加。
    })
    return {
      onShow,
      onClose
    }
  }

})
</script>

<style>

</style>
